<template>
    <div class="charts-box">
        <!-- <div
            ref="echart"
            class="charts-box-echarts"
            :style="`width : ${chart?.clientWidth}px`"
        /> -->
        <div class="charts-box-echarts">
            <el-progress
                :percentage="75"
                :stroke-width="15"
                :show-text="false"
            />
        </div>
    </div>
</template>
<script setup>
import * as echarts from "echarts";
import { nextTick, onMounted, onUnmounted, ref } from "vue";

const chart = ref(null);
const echart = ref(null);
const initChart = () => {
    chart.value = echarts.init(echart.value);
    setOptions();
    document.addEventListener("resize", () => {
        chart.value?.resize();
    });
};
var data1 = [
    { value: 20, name: "未完成" },
    { value: 80, name: "已完成" },
];
let num = 0;
data1.forEach((item) => {
    num += item.value;
});
var colorList = ["#eae74e", "#5591ef", "#b6c1de", "#81cab8"];

const setOptions = () => {
    chart.value.setOption({
        backgroundColor: "transparent",
        tooltip: {
            trigger: "item",
            // formatter: "{a} <br/>{b}: {c} ({d}%)",
            formatter: "{b}: {c} ({d}%)",
        },
        series: [
            {
                type: "pie",
                center: ["50%", "50%"],
                radius: ["90%", "60%"],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: "center",
                },
                itemStyle: {
                    normal: {
                        color: function (params) {
                            return colorList[params.dataIndex];
                        },
                    },
                },
                labelLine: {
                    show: true,
                },
                data: data1,
            },
        ],
    });
};

onMounted(() => {
    nextTick(() => {
        initChart();
    });
});

onUnmounted(() => {
    if (!chart.value) {
        return;
    }
    chart.value.dispose();
    chart.value = null;
});
</script>
<style lang="scss" scoped>
.charts-box {
    height: 100%;
    position: relative;
    display: flex;
    &-echarts {
        z-index: 2;
        width: 100%;
        position: absolute;
        bottom: 0;
    }
}
.in-line {
    --color: #5bc2a4;
}
.out-line {
    --color: #df534e;
}
</style>
